<script setup lang="ts">
import { ref } from 'vue'
import { Refresh, VideoPause, VideoPlay } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
}

const props = withDefaults(defineProps<Props>(), {
  visible: false
})

const emit = defineEmits(['play', 'pause', 'shuffle'])

const isStart = ref(false)

const startEvent = () => {
  isStart.value = true
  emit('play')
}
const endEvent = () => {
  isStart.value = false
  emit('pause')
}
const shuffleEvent = () => {
  emit('shuffle')
}
</script>

<template>
  <div v-if="props.visible" class="tools-panel__wrapper">
    <el-button
      v-if="!isStart"
      round
      type="success"
      size="large"
      :icon="VideoPlay"
      @click="startEvent"
      >开始</el-button
    >
    <el-button v-if="isStart" round type="danger" size="large" :icon="VideoPause" @click="endEvent"
      >结束</el-button
    >
    <el-button
      round
      type="primary"
      size="large"
      :icon="Refresh"
      @click="shuffleEvent"
      :disabled="isStart"
      >打乱</el-button
    >
  </div>
</template>

<style scoped lang="scss">
.tools-panel__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}
</style>
